<template>
	<view class="main animated fadeIn faster">
		<TitleBarVue :title="title"/>
		<view class="commonBox">
			<view class="balance mt-200">
				<view class="title">我的余额</view>
				<view class="bottom">
					<view class="goldicon">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%201941.png"></image>
					</view>
					<view class="Experience">
						<view class="val"><text>{{availableAmount}}</text>嗒币</view>
						<view class="desc">用于在消息/动态打赏等场景消费</view>
					</view>
					<view class="btn" @click="gotoRechargePage">充值</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import TitleBarVue from '../../components/TitleBar.vue';
	import store from '@/store/index.js';
	import { userApi } from '../../http/userApi';
	import { FirstChangeApi } from '../../http/firstChange';
	export default {
		data() {
			return {
				title: '我的钱包',
				avatar: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%201941.png',
				availableAmount: null,//可用余额
				giftAvailableAmount: null,//礼物余额
				serviceAvailableAmount: null,//服务(陪玩)可用金额
				coupons:[]
			}
		},
		components: {TitleBarVue},
		computed: {
		   validCouponCount() {
		         const now = new Date(); // 获取当前时间
		         return this.coupons.filter(item => {
		           // 将expireTime转换为标准格式并创建Date对象
		           const expireTimeStr = item.expireTime.replace(' ', 'T') + 'Z'; // 添加'T'和'Z'以符合ISO 8601格式
		           const expireTime = new Date(expireTimeStr);
						
		           // 比较两个时间
		           return expireTime > now;
		         }).length; // 返回过滤后的数组长度，即有效优惠券的数量
		       }
		  },
		methods: {
			async AssetInquiry() {
				let params = {
					resourceType: 9
				}
				let res = await FirstChangeApi.AssetInquiry(params)
			this.coupons=res.records;
			
				
			},
			gotoRechargePage() {
				uni.navigateTo({
					url: '/pagesMain/Recharge/Recharge'
				})
			},
			gotoCouponPage() {
				uni.navigateTo({
					url: '/pagesApp/coupon/coupon'
				})
			},
			gotoDabiIncome() {
				uni.navigateTo({
					url: '/pagesApp/DabiIncome/DabiIncome'
				})
			},
			gotoRafflePage() {
				uni.navigateTo({
					url: '/pagesApp/raffle/raffle'
				})
			}
		},
		mounted() {
			this.avatar=this.$store.state.user.avatar;
			this.availableAmount=this.$store.state.user.availableAmount;
			this.giftAvailableAmount=this.$store.state.user.giftAvailableAmount;
			this.serviceAvailableAmount=this.$store.state.user.serviceAvailableAmount;
			this.AssetInquiry();
		}
	}
</script>

<style scoped lang="scss">
.main {
	background: #fff;
	overflow: hidden;
	.content {
		width: 100%;
		background-color: #fff !important;
	}
	.commonBox {
		width: 710rpx;
		background-color: #f5f5f5;
		margin: 30rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 0 20rpx 25rpx 35rpx;
		.balance {
			overflow: hidden;
			.title {
				color: #231815;
				font-size: 34rpx;
				font-weight: 700;
				margin-top: 20rpx;
				margin-bottom: 40rpx;
			}
			.bottom {
				display: flex;
				justify-content: space-around;
				align-items: center;
				height: 100rpx;
				margin-bottom: 25rpx;
				.goldicon {
					margin: 10rpx 30rpx 0 10rpx;
					image {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
					}
				}
				.income_icon {
					margin: 0rpx 30rpx 0 10rpx;
					image {
						width: 60rpx;
						height: 60rpx;
					}
				}
				.Experience {
					display: flex;
					flex: 1;
					flex-direction: column;
					.val {
						font-weight: 700;
						text {
							font-size: 44rpx;
							margin-right: 8rpx;
						}
					}
					.desc {
						margin-top: 14rpx;
						color: #595757;
						font-size: 24rpx;
					}
				}
				.common_list {
					display: flex;
					flex: 1;
					align-items: center;
					height: 80rpx;
					.val {
						font-weight: 700;
						display: flex;
						align-items: flex-end;
						flex: 1;
						text {
							display: block;
							font-size: 44rpx;
							margin-right: 8rpx;
						}
						.tit {
							margin-bottom: 6rpx;
						}
					}
					.arr_icon {
						display: flex;
						justify-content: center;
						margin-right: 10rpx;
						image {
							transform: rotate(180deg);
							width: 10rpx;
							height: 20rpx;
						}
					}
				}
				.btn {
					text-align: center;
					height: 68rpx;
					line-height: 68rpx;
					padding: 0 46rpx;
					border-radius: 50rpx;
					background: linear-gradient( 90deg, #ED65CE 0%, #E966CF 2%, #859BF0 69%, #5DB0FE 99%);
					color: #fff;
				}
			}
			:last-child {
				margin-bottom: 0;
			}
			:first-child {
			}
		}
	}
	.coupon_commonBox {
		position: relative;
		margin-bottom: 50rpx;
		.balance {
			.bottom {
				.common_list {
					.val {
						display: flex;
						align-items: center;
						text {
							width: auto;
						}
						.tit {
							margin-top: 6rpx;
						}
					}
				}
			}
		}
		.GrabOrdersBtn {
			position: absolute;
			bottom: 30rpx;
			right: 20rpx;
			display: flex;
			align-items: center;
			text-align: center;
			height: 78rpx;
			line-height: 78rpx;
			border-radius: 50rpx;
			background: linear-gradient( 90deg, #ED65CE 0%, #E966CF 2%, #859BF0 69%, #5DB0FE 99%);
			color: #fff;
			font-size: 24rpx;
			.head_portrait {
				position: relative;
				z-index: 2;
				display: flex;
				justify-content: center;
				padding: 0 20rpx 0 45rpx;
				image {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
				}
				.b_img {
					position: absolute;
					top: -26rpx;
					left: 20rpx;
				}
			}
			.txt {
				flex: 1;
			}
			.arr_icon {
				display: flex;
				align-items: center;
				margin: 0 15rpx 0 20rpx;
				image {
					width: 10rpx;
					height: 10rpx;
					transform: rotate(180deg);
				}
			}
		}
	}
}
.pt-300 {
	padding-top: 300rpx;
}
.mt-200 {
	margin-top: 200rpx;
}
</style>
